<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderCustomEdit('预约课程',~{::style})">
    <style type="text/css">
        ul{
            list-style-type: none;
            padding: 0px;
        }
        .selectlist select{
            padding: 2px 10px;
            border-radius: 3px;
            border-color: #ccc;
            color: #666;
            outline: none;
            margin-right: 20px;
        }
        .loadingdiv {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.3);
            z-index: 999;
            display:none;
        }

        .loadingdiv img {
            position: absolute;
            left: 50%;
            top: 50%;
        }

        .loadingdiv span {
            width: 40px;
            height: 40px;
            border-left: 8px solid #fff;
            border-top: 8px solid rgba(255, 255, 255, 0.4);
            border-right: 8px solid rgba(255, 255, 255, 0.4);
            border-bottom: 8px solid rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform-origin: center;
            animation: loading 0.7s linear infinite;
        }

        @keyframes loading {
            0%{
                transform: translate(-50%, -50%) rotate(0deg);
            }
            100%{
                transform:translate(-50%,-50%) rotate(360deg);
            }
        }
        .booklist button{
            min-width: 100px;
        }

    </style>
</head>
<body>
<div class="ch-container" style="padding-left:15px;width: 98%;">
    <input id="tokenString" th:value="${tokenString}" type="hidden"/>
    <input id="recorder" th:value="${session.loginname}" type="hidden"/>
    <input id="recordId" th:value="${session.userid}" type="hidden"/>
    <input type="hidden" th:id="id" th:value="${personId}">
    <div class="loadingdiv">
        <span></span>
    </div>
    <div class="row" >
        <div id="content" class="col-md-12 col-sm-12" style="padding:0px;">
            <div class="clear"></div>
            <fieldset id="one" style="padding-top:10px; ">
                <form class="form-horizontal" th:action="@{'/student/booked/course/'+${personId}+'&tokenString='+${tokenString}}" method="post" id="form2">

                    <div class="form-group">
                        <label class="control-label col-sm-2">选择约课订单:</label>
                        <div class="col-sm-10 orderList">

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2" style="padding-top: 0;">筛选老师:</label>
                        <div class="col-sm-10 selectlist">
                            <select class="sexList"><option value="">性别</option></select>
                            <select class="levelList"><option value="">教师级别</option></select>
                            <select class="groupList"><option value="">适合年龄段</option></select>
                            <!--<select class="chineseList"><option value="">中文程度</option></select>-->
                            <div class="dropdown" style="display:inline;">
                                <button class="form-control btn btn-default dropdown-toggle input-sm" type="button" id="dropdownMenu3" data-toggle="dropdown" style="padding:0px 12px;font-size:12px;margin-bottom:7px;width: 100px;height: 26px;border-color: #ccc;">学员类型 &nbsp;&nbsp;<span class="caret"></span></button>
                                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" id="" style="width:100px;max-height:350px;">
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">选择上课日期:</label>
                        <div class="col-sm-3">
                            <input name="strDate" class="form-control classDate" maxlength="10" th:value="${#dates.format(#dates.createToday(),'yyyy-MM-dd')}" onclick="WdatePicker({dchanged:function(dp){$(this).val(dp.cal.getNewDateStr());getOrder()},minDate:'%y-%M-%d'})" autocomplete="off">
                        </div>
                    </div>
                    <input type="hidden" name="person.id" id="id">
                </form>
                <div class="form-horizontal">
                    <div style="border-top:1px dashed #C8C7C7;">&nbsp;</div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">选择上课时间:</label>
                        <div class="col-sm-10">
                            <ul class="timeList">

                            </ul>
                        </div>
                    </div>
                    <div style="border-top:1px dashed #C8C7C7;">&nbsp;</div>
                    <div class="form-group">
                        <label class="control-label col-sm-2">颜色说明:</label>
                        <div class="col-sm-10">
                            <button type="button" class="btn btn-default" disabled="disabled">无效课程</button>
                            <button type="button" class="btn btn-success">可预约课程</button>
                            <button type="button" class="btn btn-success" style="color:#ffb746;">常用老师可预约课程</button>
                            <button type="button" class="btn btn-danger" style="color:#ffb746;">本人已预约常用老师课程</button>
                            <button type="button" class="btn btn-warning" disabled="disabled">课程已预约满</button>
                            <button type="button" class="btn btn-danger">本人已预约课程</button>
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustomEdit(~{::script})">
    <script src="../../static/My97DatePicker/WdatePicker.js" th:src="@{/static/My97DatePicker/WdatePicker.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/student-booked.js}"></script>
    <script>

        let bookedUrl="[[${bookedUrl}]]";
        // let bookedUrl="//localhost:82/crm";
        /*
        * 获取用户订单详情
        */
        window.getOrder = function() {
            let layerIdx=layer.load()
            let params = {
                tokenString: $('#tokenString').val()
            }
            let orderid = $('.orderList input[type="radio"]:checked').val();
            $.ajax({
                url: bookedUrl+"/course/booking/order",
                type: 'post',
                data: params,
                success: function (data) {
                    layer.close(layerIdx);
                    if (data.status === 1) {
                        $('.orderList').empty();
                        data.data.forEach(function (item, i) {
                            var orderitem = '<div class="col-sm-3 radio" style="/*height: 120px;*/word-break: break-word;padding-left: 0px;">'
                            if (orderid === item.id) {
                                orderitem += '<label><input checked type="radio" name="lesson.orderId" value="'+item.id+'" onclick="getbookcourseList()">'
                            } else {
                                orderitem += '<label><input type="radio" name="lesson.orderId" value="'+item.id+'" onclick="getbookcourseList()">'
                            }
                            orderitem += '<strong>'+item.packageName+'</strong><br>'+item.materialCnName+'|'+item.materialEnName+'</label>'
                            orderitem += '</div>'
                            $('.orderList').append(orderitem)
                        })
                        if ($('.orderList').find('label').length === 1) {
                            $('.orderList').find('label')[0].click()
                        } else {
                            getbookcourseList();
                        }
                    } else {
                        $('.orderList').append('<p class="form-control-static"><strong>无有效套餐</strong></p>')
                    }
                },
                error: function (err) {
                    console.log(err)
                }
            })
        }
        window.getOrder();
        /*
        * 获取老师筛选条件
        */
        window.getSelectList = function() {
            let params = {
                tokenString: $('#tokenString').val()
            }
            $.ajax({
                url: bookedUrl + '/course/tea/attr',
                type: 'post',
                data: params,
                success: function (data) {
                    if (data.status === 1) {
                        Object.keys(data.data).map(function (keyitem) {
                            if(keyitem != 'styleList'){
                                addOption(keyitem, data.data[keyitem])
                            }
                        })
                        addStyleList(data.data.styleList);
                        $('.selectlist select').on('change', function () {
                            getbookcourseList();
                        });

                        $('input[name="styleId"]').on("click",function(){
                            getbookcourseList();
                            /*if ($('input[name="styleId"]:checked').val()!="") {
                                $('#dropdownMenu3').val($('input[name="styleId"]:checked').text());
                            }else {
                                $('#dropdownMenu3').val("学员类型");
                            }*/
                        });
                    }
                },
                error: function (err) {
                    console.log(err)
                }
            })
        }
        function addOption (domname, arr) {
            arr.map(function (item) {
                $('.' + domname).append('<option value="' + item.id + '">' + (item.name ? item.name : item.cnName) + '</option>')
            })
        }
        //添加教师风格
        function addStyleList(styleList){
            let strContent = "";
            for(let i = 0; i<styleList.length; i++){
                strContent += '<li role="presentation" style="padding-left:10px;white-space: nowrap;padding-right:10px;height:20px;">';
                strContent += '  <div class="checkbox"style="padding-top:0px;padding-bottom:10px;">';
                strContent += '		<label>';
                strContent += '		<input name="styleId" type="checkbox"  value="'+styleList[i].id+'"/>'+styleList[i].name;
                strContent += '		</label>';
                strContent += '	</div>';
                strContent += '</li>';
            }
            $(".dropdown-menu").html(strContent);
        }
        window.getSelectList();
        /*
        * 获取约课列表
        */
        window.getbookcourseList = function () {

            let orderid = $('.orderList input[type="radio"]:checked').val() ? $('.orderList input[type="radio"]:checked').val() : 0
            let date = $('.classDate').val();
            let styleIdArray = [];
            $('input[name="styleId"]:checked').each(function(i){
                styleIdArray.push($(this).val());
            });

            if (orderid !== '') {
                var layerIdx=layer.load()
                $.ajax({
                    url: bookedUrl + '/course/book/'+orderid+'/'+date,
                    type: 'post',
                    traditional: true,
                    data: {
                        'tokenString': $('#tokenString').val(),
                        'sexId': $('.sexList').val(),
                        'levelId': $('.levelList').val(),
                        'groupId': $('.groupList').val(),
                       /* 'chineseLevelId': $('.chineseList').val(),*/
                        'listStyleId': styleIdArray,
                        'recordId': $("#recordId").val()
                    },
                    success: function (data) {
                        if (data.status === 1) {
                            layer.close(layerIdx);
                            let htmlstr ="";
                            data.data.forEach(function (item, i){
                                htmlstr += '<li style="margin-bottom:30px;float:left;margin-right:20px;cursor:pointer;min-width: 100px" class="booklist">'
                                switch (item.state) {
                                    case 0:
                                        // 不可约
                                        htmlstr += '<button class="btn btn-default" disabled="disabled">'+item.buttonText+'</button>'
                                        break;
                                    case 1:
                                        // 可约
                                        if (item.cflag === 0) {
                                            htmlstr += '<button role="popover" id="popover'+i+'" class="btn btn-success" onclick="popoverHtml('+i+',\''+item.classTimestamp+'\',0,0,bookedUrl)">'+item.buttonText+'</button>'
                                        } else {
                                            htmlstr += '<button role="popover" id="popover'+i+'" class="btn btn-success" style="color:#ffb746;" onclick="popoverHtml('+i+',\''+item.classTimestamp+'\',1,0,bookedUrl)">'+item.buttonText+'</button>'
                                        }
                                        break;
                                    case 2:
                                        // 已预约可取消
                                        if (item.cflag === 0) {
                                            htmlstr += '<button class="btn btn-danger" role="popover" id="popover'+i+'" data-placement="top" onclick="popoverCancel('+i+','+item.lessonId+',\''+item.classTimestamp+'\',bookedUrl)" >'+item.buttonText+'</button>'
                                        } else {
                                            htmlstr += '<button class="btn btn-danger" role="popover" id="popover'+i+'" data-placement="top" onclick="popoverCancel('+i+','+item.lessonId+',\''+item.classTimestamp+'\',bookedUrl)" style="color:#ffb746;">'+item.buttonText+'</button>'
                                        }
                                        break;
                                    case 3:
                                        // 已预约不可取消
                                        if (item.cflag === 0) {
                                            htmlstr += '<button class="btn btn-danger" disabled="disabled">'+item.buttonText+'</button>'
                                        } else {
                                            htmlstr += '<button class="btn btn-danger" disabled="disabled" style="color:#ffb746;">'+item.buttonText+'</button>'
                                        }
                                        break;
                                }
                                htmlstr += '</li>'
                                //$('.timeList').append(htmlstr)
                            })
                            $('.timeList').html(htmlstr);
                        }else {
                            alert(data.msg);
                        }
                    },
                    error: function (err) {
                        console.log(err)
                    }
                })
            }
        }
    </script>
</div>
</body>
</html>